<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <style>
    input[type=password] {
  position: relative;
}

.input-group {
  position: relative;
  margin-bottom: 20px;
}

.input-group .input-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: #aaa;
}

input[type=password] + .show-pw-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
  padding: 5px;
  background-color: #2193b0;
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 16px;
  line-height: 0;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  z-index: 1;
}

input[type=password]:focus + .show-pw-btn {
  background-color: #6dd5ed;
}

  </style>

    <style type="text/css">
    /* 设置背景颜色和字体 */
    body {
      background: linear-gradient(to right, #2193b0, #6dd5ed);
      font-family: 'Helvetica Neue', sans-serif;
    }

    /* 调整页面标题并设置样式 */
    h2 {
      position: absolute;
      top: 20px;
      left: 50%;
      transform: translate(-50%, 0%);
      color: #fff;
      font-size: 36px;
      text-align: center;
    }

    /* 添加欢迎词 */
    .welcome-msg {
      position: absolute;
      top: 80px;
      left: 50%;
      transform: translate(-50%, 0%);
      color: #fff;
      font-size: 24px;
      text-align: center;
      padding: 5px 10px;
      border: 2px solid #fff;
      border-radius: 10px;
    }

    /* 调整表单大小和位置 */
    .form {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #FFF;
      border-radius: 10px;
      padding: 40px;
      box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease-in-out;
      width: 90%;
      max-width: 400px;
    }

    /* 当鼠标悬停在表单上时，放大表单并增加阴影 */
    .form:hover {
      transform: translate(-50%, -52%) scale(1.02);
      box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.2);
    }

    /* 调整输入框和按钮的位置和样式 */
    .input-group {
      position: relative;
      margin-bottom: 20px;
    }

    .input-icon {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 18px;
      color: #aaa;
    }

    input[type=text],
    input[type=password] {
      display: block;
      margin: 0 auto;
      padding: 15px 20px;
      border-radius: 30px;
      border: none;
      width: 100%;
      font-size: 16px;
      background-color: #f7f7f7;
      color: #555;
      transition: all 0.3s ease-in-out;
    }

    input[type=text]:focus,
    input[type=password]:focus {
      outline: none;
      box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.1);
    }

    button[type=submit] {
      display: block;
      margin: 0 auto;
      padding: 15px 30px;
      border-radius: 30px;
      border: none;
      background-color: #2193b0;
      color: #fff;
      font-size: 18px;
      cursor: pointer;
      transition: all 0.3s ease-in-out;
    }

    /* 当鼠标悬停在按钮上时，放大按钮和增加阴影 */
    button[type=submit]:hover {
      background-color: #6dd5ed;
      transform: scale(1.05);
      box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.1);
    }

    /* 调整图标大小和位置 */
    #icon {
      position: absolute;
      top: 50px;
      left: 50%;
      transform: translate(-50%, 0);
      z-index: 1;
    }

    /* 当鼠标悬停在图标上时，放大图标并增加阴影 */
    #icon:hover {
      transform: translate(-50%, -10%);
      box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.2);
    }

    #icon i {
      color: #2193b0;
      font-size: 36px;
    }

    .search-btn,
    .show-pw-btn {
      display: inline-block;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 20px;
      padding: 10px;
      background-color: #2193b0;
      color: #fff;
      border: none;
      border-radius: 10px;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.3s ease-in-out;
      z-index: 1;
    }

    /* 当鼠标悬停在按钮上时，增加背景色 */
    .search-btn:hover,
    .show-pw-btn:hover {
      background-color: #6dd5ed;
    }

    /* 调整显示密码按钮的样式及位置 */
    .show-pw-btn {
      top: 66%;
      right: 75px;
      padding: 5px;
      border-radius: 50%;
      font-size: 18px;
      line-height: 0;
    }
  </style>


    <!-- 引入 jQuery 库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!-- 引入 SweetAlert2 库 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <!-- JavaScript 代码 -->
    <script>
    $(function() {

      // 显示/隐藏密码
      $('.show-pw-btn').click(function() {
        var pwdInput = $(this).prev('input[type="password"]');
        if (pwdInput.attr('type') === 'password') {
          pwdInput.attr('type', 'text');
          $(this).text('隐藏');
        } else {
          pwdInput.attr('type', 'password');
          $(this).text('显示');
        }
      });

      // 提交表单并弹出提示框
      $('button[type="submit"]').click(function(e) {
        e.preventDefault();

        // 获取表单中的用户名和密码
        var username = $('input[name="username"]').val();
        var password = $('input[name="password"]').val();

        // 发送 AJAX 请求
        $.ajax({
          type: 'POST',
          url: 'http://localhost:8080/user/login',
          data: { username: username, password: password },
          success: function(data) {
            // 处理请求成功后的响应数据
            Swal.fire({
              icon: 'success',
              title: '登录成功',
              text: '欢迎回来！',
              showConfirmButton: false,
              window.location.href="/problemList,
              timer: 2000
            });
              window.location.href = "/problemList.html";
          },
          error: function(jqXHR, textStatus, errorThrown) {
            // 处理请求失败时的错误信息
            console.error(textStatus, errorThrown);
          }
        });
      });

    });
  </script>

    <link href='https://fonts.googleapis.com/css?family=Helvetica Neue' rel='stylesheet'>
</head>

<body>
<!-- 添加欢迎词 -->
<div class="welcome-msg">欢迎登录！</div>
<div class="form">
    <form action="#" method="post">
        <!-- 添加图标 -->
        <div id="icon"><i class="fa fa-user" aria-hidden="true"></i></div>
        <div class="input-group">
            <span class="input-icon"><i class="fa fa-user" aria-hidden="true"></i></span>
            <input type="text" name="username" placeholder="请输入用户名" required>
        </div>
        <div class="input-group">
            <span class="input-icon"><i class="fa fa-lock" aria-hidden="true"></i></span>
            <input type="password" name="password" placeholder="请输入密码" required>
            <!-- 调整显示按钮的样式及位置 -->
            <button type="button" class="show-pw-btn">显示</button>
        </div>
        <!-- 调整登录按钮的样式 -->
        <button type="submit">登录</button>
        <button onclick="location.href='/register.html'" type="button">注册</button>

    </form>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script type="text/javascript">
    // 显示/隐藏密码
    $('.show-pw-btn').click(function() {
      var pwdInput = $(this).prev('input[type="password"]');
      if (pwdInput.attr('type') === 'password') {
        pwdInput.attr('type', 'text');
        $(this).text('隐藏');
      } else {
        pwdInput.attr('type', 'password');
        $(this).text('显示');
      }
    });

    // 提交表单并弹出提示框
    $('button[type="submit"]').click(function(e) {
      e.preventDefault();
      Swal.fire({
        icon: 'success',
        title: '登录成功',
        text: '欢迎回来！',
        showConfirmButton: false,
        timer: 2000
      });
    });
  </script>
</body>

</html>
